<template>
	<view class="opt-swiper">
		<swiper duration="300" :circular="circular" @change="onChangeTab" :current="currentTab"
			:style="{'height': swiperHeight + 'px'}">
			<swiper-item v-for="cItem in swiperList" :key="cItem">
				<view class="item flex-col flex-center">
					{{ cItem }}
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script lang="ts">
export default {
	props: {
		list: { // 数据数组
			required: true,
			type: Array,
			default: []
		},
		positionIndex: { // 当前的数据的下标，直接定位到某条数据时使用
			required: false,
			type: Number,
			default: 0
		},
		swiperHeight: { // swiper的高度
			required: true,
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			circular: false, // swiper是否可循环，一开始就设置为false，避免第一条数据时还能向左滑
			currentTab: 0,
			nowIndex: 0, // 数据下标
			rate: 0, // 划过了几轮swiper，rate乘以5再加上当前的swiper下标，即为当前的数据下标nowIndex
			swiperList: [] // 初始化的swiper数组，标准状态下一个swiper有5条数据，即初始化5个swiper进行数据动态赋值
		}
	},
	created () {
		if (this.list.length > 5) {
			this.swiperList = this.list.slice(0, 5) // 初始化5条数据
		} else {
			this.swiperList = JSON.parse(JSON.stringify(this.list))
		}
		if (this.positionIndex) {
			this.positionData()
		}
	},
	watch: {
		positionIndex (val) {
			if (val) {
				this.positionData()
			}
		}
	},
	methods: {
		onChangeTab (e) {
			// #ifndef MP-WEIXIN
			this.currentTab = JSON.parse(JSON.stringify(e.detail.current))
			// #endif
			if (this.rate * 5 + e.detail.current >= this.nowIndex) { // 往右滑
				if (this.list.length - this.nowIndex < 5) { // 判断后面的数据够不够一组swiper（即5条数据）时，就把循环属性置为false，滑到最后一条数据时就不能再往右滑了
					if (this.circular) {
						this.circular = false
						this.swiperList = this.swiperList.concat(this.list.slice(this.nowIndex+2, this.list.length))
					}
					return
				} else {
					this.circular = true
				}
				this.nowIndex++
				if (this.nowIndex > 2 && this.nowIndex + 2 < this.list.length) {
					this.swiperList[(e.detail.current+2) % 5] = this.list[this.nowIndex+2]
				}
				if (e.detail.current == 4) { // swiper滑到下标4时就是一轮，即此时的数据下标为this.rate * 5 + e.detail.current
					this.rate++
				}
			} else { // 往左滑
				if (this.nowIndex <= 2) { // 当数据下标往回滑到2或以下时，就禁止循环，避免数据滑到第一条数据时还能往左滑
					this.circular = false
				} else if (this.list.length - this.nowIndex >= 5) {
					// 当往回滑到后面的数据个数足够再来一轮轮播（即大于或等于5）时，把循环属性设置为true并把swiper数组恢复成5个
					if (!this.circular) {
						this.swiperList = this.swiperList.slice(0, 5)
					}
					this.circular = true
				}
				this.nowIndex--
				if (this.nowIndex > 1) {
					this.swiperList[(e.detail.current-2 < 0 ? e.detail.current-2 + 5 : e.detail.current-2) % 5] = this.list[this.nowIndex-2]
				}
				if (this.rate && e.detail.current == 0) { // swiper滑到下标0时就减少了一轮循环
					this.rate--
				}
			}
		},
		positionData () {
			this.rate = Math.floor(this.positionIndex / 5) // 多少轮数据循环
			this.currentTab = this.positionIndex % 5 // 第17条数据的下标为1，即处于第2个swiper中
			this.nowIndex = JSON.parse(JSON.stringify(this.positionIndex))
			this.swiperList = this.list.slice(this.positionIndex-this.currentTab, this.positionIndex-this.currentTab+5)
			if (this.list.length - this.nowIndex < 5) { // 判断后面的数据够不够一组swiper（即5条数据）时，就把循环属性置为false，滑到最后一条数据时就不能再往右滑了
				this.circular = false
				this.swiperList = this.swiperList.concat(this.list.slice(this.nowIndex+2, this.list.length))
				return
			} else {
				this.circular = true
			}
			if (this.currentTab > 2 && this.nowIndex + 2 < this.list.length) {
				this.swiperList[(this.currentTab+2) % 5] = this.list[this.nowIndex+2]
			}
			if (this.nowIndex < 2) {
				this.swiperList[(this.currentTab - 2 < 0 ? this.currentTab - 2 + 5 : this.currentTab - 2) % 5] = this.list[this.nowIndex-2]
			}
		}
	}
}
</script>

<style lang="scss">
.opt-swiper {
	.item {
		width: 100%;
		height: 100%;
		.position-btn {
			padding: 0 20rpx !important;
			margin-top: 30rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #FFFFFF;
			border: 2rpx solid #E51C27;
			font-size: 28rpx;
			color: #E51C27;
		}
	}
}
</style>
